<template>
  <a-typography>
    <a-typography-title level="3">上传实验</a-typography-title>
  </a-typography>
  <a-form style="margin-top: 30px">
    <a-form-item
        label="实验名称"
        name="experimentName"
        class="inputStyle">
      <a-input v-model:value="experimentForm.experimentName" />
    </a-form-item>
    <a-form-item
        label="实验描述"
        name="experimentDescription"
        class="inputStyle">
      <a-textarea  v-model:value="experimentForm.description" rows="4"></a-textarea>
    </a-form-item>
    <a-form-item
        label="实验作者"
        name="Creator"
        class="inputStyle">
      <a-input v-model:value="experimentForm.creator" />
    </a-form-item>
  </a-form>
  <a-upload
      multiple
      :beforeUpload="beforeUpload"
      :fileList="fileList"
      :showUploadList="true"
      @change="handleChange"
      accept=".png, .jpeg, .jpg"
  >
    <a-button>
      <a-icon type="upload" /> 点击选择文件
    </a-button>
  </a-upload>
  <a-button @click="uploadFiles" type="primary">上传文件</a-button>
</template>
<script>
import axiosInstance from "@/axios/axios.js";
import {message} from "ant-design-vue";

export default {
  name: "UploadExperiment",
  data() {
    return {
      fileList: [],
      experimentForm: {
        experimentName: "",
        description: "",
        creator: "",
      }
    };
  },
  created() {
    console.log("新建实验界面上级批次名称")
    console.log(this.$route.query.experiment_batch_name)
    console.log("新建实验界面上上级实验数据集名称")
    console.log(this.$route.query.experiment_set_name)
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/jpg";
      if (!isJPG) {
        this.$message.error("只能上传jpg、jpeg或png格式的图片");
      }
      return isJPG;
    },
    async uploadFiles() {
      if (!this.experimentForm.experimentName) {
        message.error('请输入实验名称');
        return;
      }
      if (!this.experimentForm.description) {
        message.error('请输入实验描述');
        return;
      }
      if (!this.experimentForm.creator) {
        message.error('请输入实验作者');
        return;
      }
      if (this.fileList.length === 0) {
        message.error('请选择要上传的图片');
        return;
      }

      const formData = new FormData();
      this.fileList.forEach(file => {
        formData.append("imageFiles", file.originFileObj);
      });
      formData.append("creator", this.experimentForm.creator)
      formData.append("description", this.experimentForm.description)
      formData.append("experimentName", this.experimentForm.experimentName)
      formData.append("username", this.$cookies.get("username"))
      formData.append("experimentSetId", this.$route.query.experiment_set_id)
      formData.append("batchId", this.$route.query.batch_id)
      formData.append("experimentSetName",this.$route.query.experiment_set_name)
      formData.append("batchName",this.$route.query.experiment_batch_name)

      message.loading('正在上传并处理图片，请稍候...', 0);
      try {
        await axiosInstance({
          method: "POST",
          url: "/upload/experiment",
          data: formData,
        });
        message.destroy();
        message.success("上传成功！");
        this.$router.go(-1);
      } catch (error) {
        message.destroy();
        message.error(`上传失败: ${error.response?.data?.message || error.message}`);
      }
    },
    handleChange({fileList}) {
      const filteredList = fileList.filter(file => {
        const isValidType = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/jpg";
        if (!isValidType) {
          message.error(`${file.name} 不是有效的图片格式`);
        }
        return isValidType;
      });
      this.fileList = filteredList;
    }
  }
}
</script>

<style scoped>
.inputStyle{
  padding: 0 32vw 0 32vw;
}
</style>